<template>
    <div class="tabs">
<!--        <span class="active" @click="setActive" data-pagename="normalLogin">账号登录</span>-->
<!--        <span @click="setActive" data-pagename="verifyLogin">验证码登录</span>-->
        <span v-for="(item, index) in tabsNames" :key="index" :class="{active: index === 0}" @click="setActive" :data-compname="componentNames[index]">{{ item }}</span>
    </div>
</template>

<script>
    // tabs
    export default {
        name: "tabs",
        data() {
            return {
            }
        },
        methods: {
            // 给当前点击的 tab 设置 active
            setActive(e) {
                // 先清除所有 tab 的 active
                let parentNode = e.target.parentNode
                parentNode.childNodes.forEach(item => {
                    item.className = ''
                })
                // 再给当前点击的 tab 设置 active
                e.target.className = 'active'
                // console.log(e.target.dataset.compname);
                this.$emit('tabSwitch', e.target.dataset.compname)
            }
        },
        props: {
            // 标签页的名字
            tabsNames: Array,
            // 组件的名字
            componentNames: Array
        }
    }
</script>

<style lang="scss" scoped>
    .tabs {
        text-align: left;
        span {
            position: relative;
            display: inline-block;
            min-width: 90px;
            height: 48px;
            margin-right: 16px;
            line-height: 48px;
            color: white;
            &.active {
                font-size: 22px;
                font-weight: 700;
            }
            &.active::after {
                content: "";
                position: absolute;
                width: 50%;
                height: 4px;
                border-radius: 10PX;
                background-color: white;
                background-image: linear-gradient(to right, #0066FF, white);
                left: 0;
                bottom: 0;
            }
        }
    }
</style>